import { ExtractPropTypes } from "vue"
import { ImageMode, ImageModes } from "../../types/tuniao-ui"
import { validatorSizeValue } from '../../utils'

/**
 * 点击事件类型
 */
export type LazyLoadClickEvent = {
  /** 标识 */
  index: string | number,
  /** 加载状态 */
  status: 'waiting' | 'loading' | 'error' | 'real'
}

/**
 * props参数
 */
export const lazyLoadProps = {
  /** 标识 */
  index: {
    type: [String, Number],
    default: ''
  },
  /** 图片地址 */
  src: {
    type: String,
    default: ''
  },
  /** 图片裁剪模式 */
  imgMode: {
    type: String,
    default: 'scaleToFill',
    validator: (value: ImageMode) => {
      return ImageModes.includes(value)
    }
  },
  /** 图片高度, 单位rpx */
  height: {
    type: [String, Number],
    default: 450,
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 图片加载前占位图 */
  loadingImg: {
    type: String,
    default: ''
  },
  /** 图片加载失败提示图 */
  loadErrorImg: {
    type: String,
    default: ''
  },
  /** 
   * 容器进入可见区域前多少像素开始加载图片, 单位rpx 
   * 如果设置了负数则表示超过底部多少个像素才开始进行加载
   */
  threshold: {
    type: [String, Number],
    default: 100
  },
  /** 开启过度效果 */
  animation: {
    type: Boolean,
    default: true
  },
  /** 动画过渡时间, 单位ms */
  duration: {
    type: [String, Number],
    default: 500
  },
  /** 
   * 动画时间执行函数 
   * linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)
   */
  timeFunction: {
    type: String,
    default: 'ease-in-out'
  },
  /** 自定义样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
}
export type LazyLoadProps = ExtractPropTypes<typeof lazyLoadProps>

export const lazyLoadEmits = {
  /** 点击事件 */
  click: (event: LazyLoadClickEvent) => true,
  /** 图片加载完成 */
  loaded: (index: string | number) => typeof index === 'string' || typeof index === 'number',
  /** 图片加载失败 */
  error: (index: string | number) => typeof index === 'string' || typeof index === 'number'
}
export type LazyLoadEmits = typeof lazyLoadEmits
